<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>

    <!--
        v-for指令：
            1. 用于展示列表数据
            2. 语法：v-for="(item,index) in xxx" :key="yyy"
            3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}} - {{p.age}}
            </li>
        </ul>
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(char,index) of car" :key="index">
                {{char}} - {{index}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>
            <li v-for="(a,b) of str" :key="index">
                {{a}} - {{b}}
            </li>
        </ul>

        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{index}} - {{number}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                persons: [
                    {id: '001',name: '张三', age: 18},
                    {id: '002',name: '李四', age: 19},
                    {id: '003',name: '王五', age: 20}
                ],
                car: {
                    name: '奥迪A8',
                    price: '70万'
                },
                str: 'hello'
            }
        })
    </script>
</body>
</html>